<template>
<Row class="layout-content-body">
  <dtable :columns="columns" :dataAll="dataAll" :totals="total" add delCheck check op @refresh="getall()" @add="add" @del="del" @edit="edit" @delCheck="delCheck" :loading="loading"></dtable>
  <Modal title="供应商信息" v-model="editData" :mask-closable="false" class="editm" @on-ok="asyncOK" @on-cancel="asyncCancel">
    <Form ref="editForm" :model="formItem" :label-width="80" :rules="ruleValidate">
      <Form-item label="名称" prop="Name">
        <Input v-model="formItem.Name" placeholder="请输入" @on-enter="asyncOK()"></Input>
      </Form-item>
      <Form-item label="地址" prop="Address">
        <Input v-model="formItem.Address" placeholder="请输入" @on-enter="asyncOK()"></Input>
      </Form-item>
      <Form-item label="电话" prop="Phone">
        <Input v-model="formItem.Phone" placeholder="请输入" @on-enter="asyncOK()"></Input>
      </Form-item>
      <Form-item label="联系人" prop="Contact">
        <Input v-model="formItem.Contact" placeholder="请输入" @on-enter="asyncOK()"></Input>
      </Form-item>
      <Form-item label="企业编码" prop="Code">
        <Input v-model="formItem.Code" placeholder="请输入" @on-enter="asyncOK()"></Input>
      </Form-item>
      <Form-item label="税号" prop="TaxId">
        <Input v-model="formItem.TaxId" placeholder="请输入" @on-enter="asyncOK()"></Input>
      </Form-item>
      <Form-item label="开户行" prop="Bank">
        <Input v-model="formItem.Bank" placeholder="请输入" @on-enter="asyncOK()"></Input>
      </Form-item>
      <Form-item label="银行账号" prop="Account">
        <Input v-model="formItem.Account" placeholder="请输入" @on-enter="asyncOK()"></Input>
      </Form-item>
      <Form-item label="传真" prop="Fax">
        <Input v-model="formItem.Fax" placeholder="请输入" @on-enter="asyncOK()"></Input>
      </Form-item>
      <Form-item label="说明" prop="Remark">
        <Input v-model="formItem.Remark" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入...">
        </Input>
      </Form-item>
    </Form>
  </Modal>
</Row>
</template>

<script>
import dtable from '@/components/table/dtable.vue' //采用biztable
export default {
  data() {
    return {
      loading: false, //数据刷新遮罩层
      columns: [
        {
          title: '名称',
          key: 'Name',
          sortable: true
        },
        {
          title: '地址',
          key: 'Address',
          sortable: true
        },
        {
          title: '电话',
          key: 'Phone',
          sortable: true,
        },
        {
          title: '联系人',
          key: 'Contact',
          sortable: true
        },
        {
          title: '企业编码',
          key: 'Code',
          sortable: true
        },
      ], //表格样式
      dataAll: [], //表格数据来源
      dataShow: true, //是否显示表格数据查看表单
      editData: false, //显示编辑表单
      formItem: {}, //数据编辑表单
      ruleValidate: {
        Name: [{
          required: true,
          message: '名称不能为空',
          trigger: 'blur'
        }],
        Address: [{
          required: true,
          message: '地址不能为空',
          trigger: 'blur'
        }],
        Phone: [{
          required: true,
          message: '电话不能为空',
          trigger: 'blur'
        }],
        TaxId: [{
          required: true,
          message: '税号不能为空',
          trigger: 'blur'
        }],
        Bank: [{
          required: true,
          message: '开户行不能为空',
          trigger: 'blur'
        }],
        Account: [{
          required: true,
          message: '银行账号不能为空',
          trigger: 'blur'
        }],        
      }, //数据编辑表单验证规则
      addid: true, //true为修改模式，false为添加模式
      total: 0
    }
  },
  components: {
    dtable,
  },
  computed: {

  },
  watch: {},
  methods: {
    getall() {
      this.loading = true
      this.$api.getPartner().then(res => {
        if (!res.error) {
          console.log(res.Data)
          this.dataAll = res.Data
          if (this.dataAll) {
            this.total = (this.dataAll).length
          }
        } else {
          this.$Message.error(res.message)
        }
      })
      setTimeout(() => {
        this.loading = false;
      }, 500);
    },
    edit(index) {
      this.addid = true
      this.formItem = index
      this.editData = true
    },
    add() {
      this.addid = false
      this.$refs['editForm'].resetFields()
      this.editData = true
    },
    asyncOK() {
      this.$refs['editForm'].validate((valid) => {
        if (valid) {
          if (this.addid) {
            this.$api.updatePartner(this.formItem).then(res => {
              if (!res.error) {
                this.getall()
                this.$Message.success(res.message)
              } else {
                this.$Message.error(res.message, 4)
              }
            })
          } else if (!this.addid) {
            this.$api.addPartner(this.formItem).then(res => {
              if (!res.error) {
                this.getall()
                this.$Message.success(res.message)
              } else {
                this.$Message.error(res.message, 4)
              }
            })
          }
          setTimeout(() => {
            this.editData = false;
          }, 1000);
        } else {
          this.$Message.error('表单验证失败!');
        }
      })
      this.editData = false
      this.$refs['editForm'].resetFields()

    },
    asyncCancel() {
      this.getall()
      this.$refs['editForm'].resetFields()
    },
    del(row) {
      this.$api.deletePartner(row).then(res => {
        if (!res.error) {
          this.getall()
          this.$Message.success(res.message)
        } else {
          this.$Message.error(res.message, 4)
        }
      })
    },
    delCheck(row) {
      this.$api.deletePartner(row).then(res => {
        if (!res.error) {
          this.getall()
          this.$Message.success(res.message)
        } else {
          this.$Message.error(res.message, 4)
        }
      })
    },


  },
  mounted() {
    this.getall()
  }
}
</script>
